<!-- Dom模板 -->
<template>
  <div class="order">
    <!-- Dom内容 -->

    <!-- tab栏 -->
    <div class="top">
        <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane v-for="(item,index) in menuList" :key="index" :label='item'>
                </el-tab-pane>
        </el-tabs>
    </div>
    

    <!-- 内容区 -->
    <div v-show="index==='0'">
          <Card :price='price' :num='num'/>
    </div>


    <div v-show="index==='2'">
       <Sales/>
    </div>


    <div v-show="index==='1'">
        <List/>
    </div>


  </div>
</template>

<script>
// import a from './a'; // 引入组件
const Card = () =>import('@/components/order/card/index.vue')
const Sales = () =>import('@/components/order/sales/index.vue')
const List = () =>import('@/components/order/list/index.vue')
export default {
  name: '',
  components:{
    Card,Sales,List
  },
  data() {
    return {
      price:999,
      num:85,
      index:'0',
      activeName: '0',
      menuList:[
          '今日订单','订单列表','销售统计'
      ],
     }
  },

  // 生命周期 - 创建完成（访问当前this实例）
  created() {
      
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    
  },
  // Vue方法定义
  methods: {
      handleClick(tab) {
        this.index=tab.index
      },
      
  
  }
}
</script>

<style lang="less">
/* @import url(''); 引入css类 */
@import url('./index.less');
</style>